{% extends 'default/base.html' %}

{#{% load pagination_tags %}#}
{% load projects_tag %}

{% block content %}

    <style>
        .test_width {
            width: 130px;
        }
    </style>

    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="ibox float-e-margins">
                <div id="edit_result">
                    <div class="ibox-title">
                        <h5> 主机详细信息列表 <span
                                style="color:red">总共有:{{ server_list_count }}台  真实机:{{ physics }}  虚拟机: {{ vms }}台</span>
                        </h5>

                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user"></ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>

                    <div class="ibox-content">
                        <form id="asset_form">
                            {#                        {% csrf_token %}#}
                            <div class="col-sm-1 test_width" style="padding-left: 0">
                                <label>
                                    <select name="change_idc" class="form-control m-b" onchange="change_info()">
                                        <option value="">所有机房</option>
                                        {% for idc in idcs %}
                                            <option value="{{ idc.name }}"> {{ idc }}</option>
                                        {% endfor %}
                                    </select>
                                </label>
                            </div>
                            <div class="col-sm-1 test_width">
                                <label>
                                    <select name="change_business" class="form-control m-b" onchange="change_info()">
                                        <option value="all">所有项目</option>
                                        {% for server_type in server_types %}
                                            <option value="{{ server_type.service_name }}"> {{ server_type }}</option>
                                        {% endfor %}
                                    </select>
                                </label>
                            </div>
                            <div class="col-sm-1 test_width">
                                <label>
                                    <select name="change_service" class="form-control m-b" onchange="change_info()">
                                        <option value="all">所有服务</option>
                                        {% for service in services %}
                                            <option value="{{ service.name }}"> {{ service }}</option>
                                        {% endfor %}
                                    </select>
                                </label>
                            </div>
                            <div class="col-sm-1 test_width">
                                <label>
                                    <select name="change_status" class="form-control m-b" onchange="change_info()">
                                        <option value="">所有状态</option>
                                        {% for server_statu in server_status %}
                                            <option value="{{ server_statu.0 }}"> {{ server_statu.1 }}</option>
                                        {% endfor %}
                                    </select>
                                </label>
                            </div>
                            <div class="col-sm-1 test_width">
                                <label>
                                    <select name="change_brand" class="form-control m-b" onchange="change_info()">
                                        <option value="">所有型号</option>
                                        {% for brand in brands %}
                                            <option value="{{ brand.0 }}"> {{ brand.1 }}</option>
                                        {% endfor %}
                                    </select>
                                </label>
                            </div>
                            <div class="col-sm-1 test_width">
                                <label>
                                    <select name="change_type" class="form-control m-b" onchange="change_info()">
                                        <option value="">所有类型</option>
                                        <option value="1">物理机</option>
                                        <option value="0">虚拟机</option>
                                    </select>
                                </label>
                            </div>
                            <div class="col-sm-3">
                                <div class="input-group">
                                    <input type="text" class="form-control m-b" id="search_input" name="keyword"
                                           placeholder="Search">
                                    <input type="text" style="display: none">
                                    <div class="input-group-btn">
                                        <button type="button" href="/assets/change_info_ajax/?search=true" name="search"
                                                class="btn btn-xm btn-primary search_btn" onclick="return false">
                                            搜索
                                        </button>
                                        {#                                    <button type="button" href="/assets/change_info_ajax/?_search=true" name="_search" class="btn btn-xm btn-success search_btn_pdf" onclick="return false">#}
                                        {#                                        导出#}
                                        {#                                    </button>#}
                                        <div class="btn-group" role="group">
                                            <button type="button" class="btn btn-xm btn-success dropdown-toggle"
                                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                导出
                                                <span class="caret"></span>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a href="/assets/change_info_ajax/?_search=true&name=pdf"
                                                       class="search_btn_pdf" name="search"
                                                       onclick="return false">导出pdf</a></li>
                                                <li><a href="/assets/change_info_ajax/?_search=true&name=excel"
                                                       class="search_btn_pdf" name="search" onclick="return false">导出excel</a>
                                                </li>
                                            </ul>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div id="download"></div>
                            <div id="replace">
                                <table id="host_info" class="table table-striped table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th class="text-center"><input type="checkbox" id="select_all"
                                                                       onclick="check_all('asset_form')"></th>
                                        <th class="text-center"> IP</th>
                                        <th class="text-center"> 主机名</th>
                                        <th class="text-center"> IDC</th>
                                        <th class="text-center"> 资产编号</th>
                                        <th class="text-center"> 品牌</th>
                                        <th class="text-center"> 配置</th>
                                        <th class="text-center"> 项目</th>
                                        <th class="text-center"> 服务</th>
                                        <th class="text-center"> 状态</th>
                                        <th class="text-center"> 操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    {% for host in hosts %}
                                        <tr class="gradeX">
                                            <td class="text-center"><input type="checkbox" name="selected"
                                                                           value="{{ host.pk }}"></td>
                                            {% if host.eth1 %}
                                                <td class="text-center"><a href="{% url 'host_detail' pk=host.pk %}"
                                                                           class="select_node"><i class="fa fa-linux"
                                                                                                  style="color:#080506"></i> {{ host.eth1 }}
                                                </a></td>
                                            {% else %}
                                                <td class="text-center"><a href="{% url 'host_detail' pk=host.pk %}"
                                                                           class="select_node"><i class="fa fa-linux"
                                                                                                  style="color:#080506"></i> {{ host.eth2 }}
                                                </a></td>

                                            {% endif %}
                                            {#                                            <td class="text-center"> <a href="/assets/host_detail/?pk={{ i.pk }}" class="select_node" ><i class="fa fa-linux" style="color:#080506"></i> {{ i.eth1 }} </a></td>#}
                                            <td class="text-center"> {{ host.node_name }} </td>
                                            <td class="text-center"> {{ host.idc.name }} </td>
                                            <td class="text-center"> {{ host.number }} </td>
                                            <td class="text-center"> {{ host.brand }} </td>
                                            <td class="text-center"> {{ host.cpu }} <span
                                                    class="text-success">|</span> {{ host.memory }} <span
                                                    class="text-success">|</span> {{ host.hard_disk }}</td>
                                            <td class="text-center">
                                                {% for host_ in host.pk|projects_list %}  {# todo #}
                                                    <a href="/assets/server/server_type/?service_name={{ host_ }}"
                                                       class="btn btn-info btn-xs">{{ host_ }}</a>
                                                {% endfor %}
                                            </td>
                                            <td class="text-center">
                                                {{ host.service.all|group_str2 }}
                                            </td>
                                            <td class="text-center">
                                                <div class="btn-group tooltip-demo" data-toggle="buttons">
                                                    {% if host.status == 0 %}
                                                        <span class="glyphicon glyphicon-remove" data-toggle="tooltip"
                                                              data-placement="bottom" title="未安装系统" aria-hidden="true"
                                                              style="color: #ff6846"></span>
                                                    {% elif host.status == 1 %}
                                                        <span class="glyphicon glyphicon-ok" aria-hidden="true"
                                                              data-toggle="tooltip" data-placement="bottom"
                                                              title="已安装系统" style="color:#2ad49e"></span>
                                                    {% elif host.status == 3 %}
                                                        <span class="fa fa-trash-o text-danger" type="button"
                                                              aria-hidden="true" data-toggle="tooltip"
                                                              data-placement="bottom" title="报废"></span>
                                                    {% else %}
                                                        <span class="glyphicon glyphicon-saved" aria-hidden="true"
                                                              data-toggle="tooltip" data-placement="bottom"
                                                              title="安装系统中..." style="color:#2d98d4"></span>
                                                    {% endif %}
                                                </div>
                                            </td>
                                            <td class="text-center">
                                                <a href="{% url 'host_detail' pk=host.pk %}"
                                                   class="btn btn-xs btn-primary" data-toggle="tooltip"
                                                   data-placement="bottom" title="详情">详情</a>
                                                {% if request.user.is_superuser or request.session.fun_auth.edit_host %}
                                                    <a href="{% url 'host_update' pk=host.pk %}"
                                                       class="btn btn-xs btn-info" data-toggle="tooltip"
                                                       data-placement="bottom" title="修改">修改</a>
                                                {% endif %}
                                                {% if request.user.is_superuser or request.session.fun_auth.delete_host %}
                                                    <a href="{% url 'host_delete' pk=host.pk %}"
                                                       class="btn btn-xs btn-danger node-edit" data-toggle="tooltip"
                                                       data-placement="bottom" title="删除">删除</a>
                                                {% endif %}
                                                {% if request.user.is_superuser %}
                                                    <a href="/assets/host_update/?pk={{ host.pk }}"
                                                       class="btn btn-xs btn-success" data-toggle="tooltip"
                                                       data-placement="bottom" title="自动上报硬件信息">更新</a>
                                                    <a href="/assets/zabbix_host/?pk={{ host.pk }}"
                                                       class="btn btn-xs btn-default" data-toggle="tooltip"
                                                       data-placement="bottom" title="监控信息">监控</a>
                                                {% endif %}
                                                {% if request.user.is_superuser %}
                                                    <a href="/assets/server/restart/{{ host.pk }}/"
                                                       class="btn btn-xs btn-warning voilet_restart"
                                                       data-toggle="tooltip" data-placement="bottom" title="重装系统">装机</a>
                                                {% endif %}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>

                                <div class="row">
                                    <div class="col-sm-6">
                                        <div id="host_list">
                                            <button type="button" class="btn btn-danger" id="host_del">批量删除</button>
                                            <a value="/assets/host_edit_batch/" type="button"
                                               class="btn btn-warning iframe" id="host_edit">批量修改</a>
                                            {% if request.user.is_superuser or request.session.fun_auth.add_host %}
                                                <a href="{% url 'host_create' %}" type="button" class="btn btn-info">添加主机</a>
                                            {% endif %}

                                        </div>
                                    </div>


                                    {#  分页start  #}
                                    <div class="col-sm-6">
                                        <div class="dataTables_paginate paging_simple_numbers" id="editable_paginate">
                                            <ul class="pagination" style="margin-top: 0; float: right">
                                                {% if hosts_pagination.has_previous %}
                                                    <li class="paginate_button previous" aria-controls="editable"
                                                        tabindex="0" id="editable_previous">
                                                        <a href="?page={{ hosts_pagination.previous_page_number }}">上一页</a>
                                                    </li>
                                                {% else %}
                                                    <li class="paginate_button previous disabled"
                                                        aria-controls="editable" tabindex="0" id="editable_previous">
                                                        <a href="#">上一页</a>
                                                    </li>
                                                {% endif %}

                                                {% for page in hosts_pagination.paginator.page_range %}
                                                    {% if hosts_pagination.number == page %}
                                                        <li class="paginate_button active" aria-controls="editable"
                                                            tabindex="0"><a href="?page={{ page }}"
                                                                            title="第{{ page }}页">{{ page }}</a></li>
                                                    {% else %}
                                                        <li class="paginate_button" aria-controls="editable"
                                                            tabindex="0"><a href="?page={{ page }}"
                                                                            title="第{{ page }}页">{{ page }}</a></li>
                                                    {% endif %}
                                                {% endfor %}

                                                {% if hosts_pagination.has_next %}
                                                    <li class="paginate_button next" aria-controls="editable"
                                                        tabindex="0" id="editable_next">
                                                        <a href="?page={{ hosts_pagination.next_page_number }}">下一页</a>
                                                    </li>
                                                {% else %}
                                                    <li class="paginate_button next disabled" aria-controls="editable"
                                                        tabindex="0" id="editable_next">
                                                        <a href="#">下一页</a>
                                                    </li>
                                                {% endif %}
                                            </ul>
                                        </div>
                                    </div>
                                    {#  分页end  #}

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#host_del').click(function () {
                var ids = getids();
                if (ids == '') {
                    alert("请至少选择一行!");
                    return false;
                }
                if (confirm("确定删除")) {
                    $.ajax({
                        type: "post",
                        data: {ids: ids},
                        url: "/assets/host_del_batch/",
                        success: function () {
                            window.open("/assets/host_list/", "_self");
                        }
                    });
                }
            });


            $(".iframe").on('click', function () {
                var ids = getids();
                if (ids == '') {
                    alert("请至少选择一行!");
                    return false;
                }
                var url = $(this).attr("value") + '?pk=' + ids;
                index = $.layer({
                    type: 2,
                    title: '风行网自动化运维平台-批量修改主机',
                    maxmin: true,
                    shift: 'top',
                    border: [2, 0.3, '#1AB394'],
                    shade: [0.5, '#000000'],
                    shadeClose: true,
                    area: ['800px', '600px'],
                    iframe: {src: url},
                    close: function () {
                        location.replace(location.href);
                    }
                });
            });
        });

        $("#search_input").keydown(function (e) {
            if (e.keyCode == 13) {
                change_info()
            }
        });
        $('.search_btn').unbind('click').bind('click', function () {
            var url = $(this).attr("href");
            $.ajax({
                type: "GET",
                url: url,
                data: $("#asset_form").serialize(),
                success: function (data) {
                    $("#replace").html(data);
                }
            });
        });
        $('.search_btn_pdf').unbind('click').bind('click', function () {
            var url = $(this).attr("href");
            $.ajax({
                type: "GET",
                url: url,
                data: $("#asset_form").serialize(),
                success: function (data) {
                    $("#download").html(data);
                }
            });
        });

        function change_info() {
            // var data = $("#asset_form").serialize();
            // location.href = "/assets/change_info_ajax/?" + data;
            $.ajax({
                type: "GET",
                url: "/assets/change_info_ajax/",
                data: $("#asset_form").serialize(),
                success: function (data) {
                    $("#replace").html(data);
                }
            });
        }
    </script>

{% endblock %}
